一、新增 Vue Component 的目錄

1. resources/components/index 內新增首頁個區塊 components
   

2. 設定 vuex 配置

   • 新增 mapGetters, 為 vuex 提供的計算屬性方法, 可以從 vuex 模塊內的 getter 內取得 function 建立計算屬性

    <script>
        import {mapState, mapGetters} from 'vuex'
        export default {
            computed:{
                ...mapState('newArrival', ['new_arrivals']),
                ...mapGetters('newArrival', ['getSlice'])
            },
            mounted(){
                console.log('new arrivals component mounted')
                this.$store.dispatch('newArrival/getNewArrival', '5')
            }
        }
    </script>

二、設定 Vuex 配置

1. resources/js/store 下建立模塊, 用來取不同資料內容
   

2. e.g 設定首頁最新商品區塊

   • 打 API /api/front/category/{category_id} 取回商品資料
   • 使用 vuex 流程建立 state new_arrivals 屬性儲存商品資料, 提供給 Vue 共同時用
   • 取得資料時需要需在屬性前面加上名空間 e.g. newArrival/getNewArrival

    <script>
        import {mapState, mapGetters} from 'vuex'
        export default {
            computed:{
                // 建立 state 計算屬性
                ...mapState('newArrival', ['new_arrivals']),
                // 建立 getter 計算屬性
                ...mapGetters('newArrival', ['getSlice'])
            },
            mounted(){
                console.log('new arrivals component mounted')
                this.$store.dispatch('newArrival/getNewArrival', '5')
            }
        }
    </script>

3. mapMutations 與 mapActions

• 當使用 Vue Component 時, 會使用 methods 設定方法, 來觸發 Vuex 的 actions, 此時可以使用 mapActions 來設定 methods 方法, 與 mapState、mapGetters 類似

    import {mapState, mapGetters, mapActions, mapMutations} from 'vuex'
    export default {
        // ... 其他省略
        methods: {
            // 第一種寫法, 指定 function 的名稱
            ...mapActions({getProducts:'getNewArrival'})
            // 直接使用原始方法名稱
            ...mapActions(['getNewArrival'])
        }
    }

• 當不需要經過 Vuex actions 的流程, 可以直接提交資料到 mutations 直接修改 state 內容, 此時可以設定 mapMutations

    import {mapState, mapGetters, mapActions, mapMutations} from 'vuex'
    export default {
        // ... 其他省略
        methods: {
            // 第一種寫法, 指定 function 的名稱
            ...mapMutations({getARRIVAL:'GETNEWARRIVAL'})
            // 直接使用原始方法名稱
            ...mapMutations(['GETNEWARRIVAL'])
        }
    }

• 設定完成後可再 Vue 內直接呼叫調用

    // 參數為要修改的值
    getProducts(5)